<template>
    <div class="box">
      <h2>笔记上传</h2>
      <form @submit.prevent="uploadNote">
        <input type="text" v-model="note.noteTitle" placeholder="请输入笔记标题" required>
        <input type="text" v-model="note.noteContent" placeholder="请输入笔记概要" required>
        <quill-editor v-model="note.noteDetail" ref="myQuillEditor"></quill-editor>
        
        <label for="foodImage">icon:</label>
        <input type="file" id="foodImage" @change="previewImage" class="form-control" accept="image/*" required>
        
        <button type="submit">上传笔记</button>
        <div v-if="note.noteIsUploading">
          <p>正在上传...</p>
        </div>
        <div v-if="note.noteIsUploaded">
          <p>笔记已上传成功！</p>
        </div>
      </form>
    </div>
  </template>
  
  <script>
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import { getDate } from '@/utils/getDate';
  import axios from 'axios';
  axios.defaults.baseURL="http://localhost:8087"
  export default {
    components: {
      quillEditor
    },
    data() {
      return {
        note:{
            noteTitle: '',
            noteContent: '', // 用于存储富文本编辑器的内容
            noteDetail:'',
            noteImage: null, // 用于存储上传的图片路径
            noteIsUploading: false, // 用于表示笔记是否正在上传
            noteIsUploaded: false // 用于表示笔记是否上传成功
        }
        
      }
    },
    methods: {
        previewImage(event) {
        const file = event.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = (e) => {
            this.note.noteImage = e.target.result;
          };
        }
      },
      uploadNote() {
        this.note.noteIsUploading = true; // 设置上传状态为正在上传
        let userid=sessionStorage.getItem("userid")
        
        if(userid)
        {
          try {
            let objectid=null
            axios.get(`/findObject_total/2`).then(res=>{
           
              objectid=res.data.total+1
              axios({
                url:'/insertobject',
                method:'post',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data:`type=2&objectid=`+objectid+'&name='+this.note.noteTitle+'&image='+encodeURIComponent(this.note.noteImage)+'&content='+this.note.noteContent+'&detail='+encodeURIComponent(this.note.noteDetail)
            }).then(res=>{
              // axios.post(`/insertupload?uploadid=`+userid+`&type=1&objectid=`+objectid+`&uploadtime=`+getDate()).then(res=>{
              //   console.log(res.data)
              // })
              axios({
                url:'/insertupload',
                method:'post',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data:`uploadid=`+userid+`&type=2&objectid=`+objectid+`&uploadtime=`+getDate()
              }).then(res=>{
                console.log(res.data)
                alert('笔记信息已提交，即将上传笔记到服务器...');
                // 重置表单
                this.note = {
                    noteTitle: '',
                    noteContent: '', // 用于存储富文本编辑器的内容
                    noteImage: null, // 用于存储上传的图片路径
                    noteIsUploading: false, // 用于表示笔记是否正在上传
                    noteIsUploaded: false // 用于表示笔记是否上传成功
                };
                this.note.noteIsUploading = false; // 设置上传状态为已上传完成
                this.note.noteIsUploaded = true; // 设置已上传成功标志位为true
              })
              
              console.log(res.data)
            })
            })
            } catch (error) {
            console.error(error); // 如果上传失败，记录错误信息到控制台，具体错误处理根据实际情况进行定制
            this.note.noteIsUploading = false; // 设置上传状态为上传失败完成标志位为false
            } finally {
            // 无论上传成功还是失败，最后都需要将这个标志位设置为false，表示已经处理完毕了
            this.note.noteIsUploaded = false; 
            console.log(this.note.noteContent);
          }
        }
        else{
          alert("请先登录");
          this.$router.push({
            name:'login'
          })
        }
        
      }
    }
  }
  </script>
  
  <style>
  /* 这里可以添加一些自定义样式 */
  /* 全局样式 */
  .box {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
body {
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}

/* 容器样式 */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
h2 {
  color: #333;
  text-align: center;
}

/* 输入框样式 */
input[type="text"],
input[type="file"],
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 按钮样式 */
button {
  background-color: #5cb85c;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #4cae4c;
}

/* 上传状态样式 */
.upload-status {
  text-align: center;
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 600px) {
  /* 适配小屏幕设备的样式 */
}

  </style>
  